<template>
	<view class="edit">
		<view class="title">
			<input type="text" v-model="artObj.title" placeholder="请输入标题" placeholder-class="placeholderClass" />
		</view>
		<!-- 富文本编辑器 -->
		<view class="content">
			<editor
				id="myEdit"
				placeholder="写点什么吧~~"
				show-img-size
				show-img-resize
				show-img-toolbar
				@ready="onEditReady"
				@focus="onFocus"
				@statuschange="statusChange"
				@input="inputChange"
			></editor>
		</view>
		<view class="btnGroup">
			<u-button @click="onSubmit" type="primary" text="确认发布" :disabled="!artObj.title"></u-button>
		</view>

		<!-- 控件 -->
		<view class="tools" v-show="toolShow">
			<view class="item" @click="clickHead">
				<text class="iconfont icon-zitibiaoti" :class="headShow ? 'active' : ''"></text>
			</view>
			<view class="item" @click="clickBold">
				<text class="iconfont icon-zitijiacu" :class="boldShow ? 'active' : ''"></text>
			</view>
			<view class="item" @click="clickItalic">
				<text class="iconfont icon-zitixieti" :class="italicShow ? 'active' : ''"></text>
			</view>
			<view class="item" @click="clickDivider">
				<text class="iconfont icon-fengexian"></text>
			</view>
			<view class="item" @click="clickInsertImage">
				<text class="iconfont icon-charutupian"></text>
			</view>
			<view class="item" @click="editOk">
				<text class="iconfont icon-duigou_kuai"></text>
			</view>
		</view>
	</view>
</template>

<script>
//导入工具类
import { getImgSrc,getProvince } from '@/utils/tools.js';
//连接云数据库
const db = uniCloud.database();

export default {
	data() {
		return {
			//控件的高亮显示
			toolShow: false,
			headShow: false,
			boldShow: false,
			italicShow: false,
			tempFiles: [], //临时存放图片
			maxSize: 3, //图片最大数量

			artObj: {
				title: '',
				content: '',
				description: '', //描述
				picurls: '' //图片集合
			}
		};
	},
	onLoad() {
		getProvince().then((res) => {
			console.log(res);
		});
	},
	//隐藏时保存一下
	onHide() {
		//获取详情和内容
		// this.artObj.description = res.text.slice(0, 50);
		// this.artObj.content = res.html;
		// uni.setStorageSync("artObj",artObj);
	},
	methods: {
		//初始化
		onEditReady() {
			//获取富文本节点，exec：执行所有请求,请求结果按请求次序构成数组；fields：获取节点的相关信息。第一个参数配置要哪些信息（必选）；第二参数是方法的回调函数，参数是指定的相关节点信息
			uni.createSelectorQuery()
				.in(this)
				.select('#myEdit')
				.fields(
					{
						size: true, //尺寸
						context: true //点对应的 Context 对象
					},
					(res) => {
						this.editorCtx = res.context;
					}
				)
				.exec();
		},
		//离开焦点显示控件
		onFocus() {
			this.toolShow = true;
		},
		//确认
		editOk() {
			this.toolShow = false;
		},

		//提交
		async onSubmit() {
			let res = await uni.showModal({
				title: '提示',
				content: '是否确认继续操作？'
			});
			if (res.cancel) {
				return;
			}

			//获取富文本内容
			this.editorCtx.getContents({
				success: async (res) => {
					//获取详情和内容
					this.artObj.description = res.text.slice(0, 50);
					this.artObj.content = res.html;
					this.artObj.picurls = getImgSrc(res.html);
					uni.showLoading({
						title: '发布中...'
					});

					//上传所有的本地图片
					// uni.showLoading({
					// 	title: '上传中请稍后',
					// 	mask: true
					// });
					// console.log('上传：', this.tempFiles);
					// let newArr = this.tempFiles.map(async (item) => {
					// 	return await uniCloud.uploadFile({
					// 		filePath: item.path,
					// 		cloudPath: item.name
					// 	});
					// });
					// await Promise.all(newArr)
					// 	.then((res) => {
					// 		console.log('上传完毕', res);
					// 		this.artObj.picurls = res.map((item) => {
					// 			return item.fileID;
					// 		});
					// 	})
					// 	.catch((err) => {
					// 		console.log('上传失败', err);
					// 	});
					// uni.hideLoading();

					this.addData();
				}
			});
		},
		//提交到数据库
		addData() {
			db.collection('quanzi_article')
				.add({
					...this.artObj
				})
				.then((res) => {
					console.log('提交数据库成功', res);
					uni.hideLoading();
					uni.showToast({
						title: '发布成功'
					});
					//返回首页
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}, 500);
				});
		},

		//通过 Context 方法改变编辑器内样式时触发，返回已设置的样式   解决h标题换行依旧高亮问题
		statusChange(e) {
			let detail = e.detail;
			console.log('测试当前图片的数量', this.tempFiles);
			//时刻检查detail上的属性与高亮显示的条件 是否对应
			this.checkStatus('header', detail, 'headShow');
			this.checkStatus('bold', detail, 'boldShow');
			this.checkStatus('italic', detail, 'italicShow');
		},
		/**
		 * @param {Object} name 监听detail对象上的哪个属性
		 * @param {Object} detail 已设置的样式
		 * @param {Object} obj 当前vue实例要变更的属性
		 */
		checkStatus(name, detail, obj) {
			if (detail.hasOwnProperty(name)) {
				this[obj] = true;
			} else {
				this[obj] = false;
			}
		},

		//编辑器输入触发，核对编辑器中的图片和数据中的图片，将多余的删除
		inputChange(e) {
			// let arr = [];
			// e.detail.delta.ops.forEach((item) => {
			// 	if (item.insert.image) {
			// 		arr.push(item.insert.image);
			// 	}
			// });
			//保存的图片数量大于页面上存在的数量--本地
			// if (this.tempFiles.length > arr.length) {
			// 	this.tempFiles = this.tempFiles.filter((item) => {
			// 		return arr.indexOf(item.path) !== -1;
			// 	});
			// 	console.log('清理多余', this.tempFiles);
			// }
			// if (this.tempFiles.length > arr.length) {
			// 	this.tempFiles.forEach(async (item) => {
			// 		console.log(item);
			// 		let index = arr.findIndex((res) => res == item);
			// 		if (index == -1) {
			// 			await uniCloud
			// 				.deleteFile({
			// 					fileList: [item]
			// 				})
			// 				.then((res) => {
			// 					console.log('清除成功', res);
			// 				})
			// 				.catch((error) => {
			// 					console.log('清除失败', error);
			// 				});
			// 		}
			// 	});
			// }
		},

		//添加图像
		clickInsertImage() {
			uni.chooseImage({
				success: async (res) => {
					//本地保存，稍后上传，  不能和富文本解析器很好的配合
					//合并过去的和现在传入的图片路径;
					// let oldTem = this.tempFiles;
					// let nsTem = [...oldTem, ...res.tempFiles];
					// if (nsTem.length > this.maxSize) {
					// 	uni.showToast({
					// 		title: `图片不能超过${this.maxSize}张`
					// 	});
					// 	nsTem = nsTem.slice(0, this.maxSize);
					// 	//传入的图片也要截取
					// 	res.tempFiles = res.tempFiles.slice(0, this.maxSize - oldTem.length);
					// }
					// this.tempFiles = nsTem;
					//遍历当前插入的图片，插入到富文本中去
					// for (let item of res.tempFiles) {
					// 	this.editorCtx.insertImage({
					// 		src: item.path
					// 	});
					// }
					if (this.tempFiles >= this.maxSize) {
						uni.showToast({
							title: `图片不能超过${this.maxSize}张`
						});
						return;
					}
					uni.showLoading({
						title: '上传中请稍后',
						mask: true
					});
					for (let item of res.tempFiles) {
						//适配小程序不支持带后缀名name属性
						let suffix = item.path.substring(item.path.lastIndexOf('.'));
						let randomName = Date.now() + '' + String(Math.random()).substr(3, 6) + suffix;

						let res = await uniCloud.uploadFile({
							filePath: item.path,
							cloudPath: item.name || randomName
						});

						// console.log("上传：",res);
						//统计上传的图片
						this.tempFiles.push(res.fileID);

						this.editorCtx.insertImage({
							src: res.fileID
						});
					}
					uni.hideLoading();
				}
			});
		},
		//添加大标题
		clickHead() {
			this.headShow = !this.headShow;
			this.editorCtx.format('header', this.headShow ? 'h2' : false);
		},
		//加粗
		clickBold() {
			this.boldShow = !this.boldShow;
			this.editorCtx.format('bold');
		},
		//倾斜
		clickItalic() {
			this.italicShow = !this.italicShow;
			this.editorCtx.format('italic');
		},
		//添加分割线
		clickDivider() {
			this.editorCtx.insertDivider();
		}
	}
};
</script>

<style lang="scss">
/deep/ .ql-blank::before {
	font-style: none;
	color: #000000;
}

.edit {
	padding: 30rpx;

	.title {
		input {
			height: 120rpx;
			font-size: 46rpx;
			border-bottom: 1px solid #e4e4e4;
			margin-bottom: 30rpx;
			color: #000;
		}
		.placeholderClass {
			color: #e0e0e0;
		}
	}
	.content {
		.myEdit {
			height: calc(100vh - 500rpx);
			margin-bottom: 30rpx;
		}
	}
	.tools {
		width: 100%;
		height: 80rpx;
		background: #fff;
		border-top: 1rpx solid #f4f4f4;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.iconfont {
			font-size: 36rpx;
			color: #333;
			&.active {
				color: #0199fe;
			}
		}
	}
}
</style>